<template>
  <div style="margin-top: 20px;">
    <div class="flex_center">
      <div style="width: 40%;margin-bottom: 30px">
        <el-input style="border: 2px solid red;" placeholder="请输入内容" v-model="queryInfo2.query" clearable @clear="getGoodsList">
          <template slot="append">
            <el-button  @click="getGoodsList" style="background-color: red;color: white;">搜索</el-button>
          </template>
        </el-input>
      </div>
    </div>
    <div class="backDiv">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="width:70%;">
        <el-submenu index="0">
          <template slot="title">所有产品分类</template>
          <el-menu-item :index="item.depId" v-for="item in depList" :key="item.depId">{{item.depName}}</el-menu-item>
        </el-submenu>
        <el-submenu :index="index" v-for="(item,index) in cateSplitList" :key="index">
          <template slot="title">{{depList[index].depName}}</template>
          <el-menu-item :index="item2.cateId" v-for="item2 in item" :key="item2.cateId" @click="getSpecialGoods((index+1) + '/' + item2.cateId, depList[index].depName, item2.cateName)">{{item2.cateName}}</el-menu-item>
        </el-submenu>
        <el-menu-item index="99" @click="getDiscounts">
          <template slot="title">商品组合优惠列表</template>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DepCateGoods',
  data () {
    return {
      depList: [],
      cateSplitList: [],
      specialGoodsList: [],
      goodslist: [],
      queryInfo1: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      total1: 0,
      queryInfo2: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      total2: 0
    }
  },
  created () {
    this.getCateSplitList()
    this.getDepList()
  },
  methods: {
    getCateSplitList () {
      this.$axios.get('category/split')
        .then(resp => {
          if (resp && resp.data.status !== 200) {
            return this.$message.error('获取商品分区分类列表失败!')
          }
          console.log('测试')
          console.log(resp.data.data)
          this.cateSplitList = resp.data.data
        })
    },
    getDepList () {
      this.$axios.get('department')
        .then(resp => {
          if (resp && resp.data.status !== 200) {
            return this.$message.error('获取商品分区列表失败!')
          }
          this.$message.success('获取商品分区分类列表成功!')
          console.log(resp.data.data)
          this.depList = resp.data.data
        })
    },
    getSpecialGoods (index, depName, cateName) {
      console.log(index)
      this.$axios.get('goods/' + index, {params: this.queryInfo1})
        .then(resp => {
          if (resp && resp.data.status !== 200) {
            return this.$message.error('获取具体商品失败!')
          }
          this.$message.success('获取具体商品成功!')
          console.log(resp.data.data.data)
          this.total1 = resp.data.data.totalpage
          this.specialGoodsList = resp.data.data.data
          this.$router.push({name: 'specialGoods', params: {list: this.specialGoodsList, depName: depName, cateName: cateName, queryInfo: this.queryInfo1, total: this.total1, index: index}})
        })
    },
    getGoodsList () {
      this.$axios.get('goods', {params: this.queryInfo2})
        .then(resp => {
          if (resp && resp.data.status !== 200) {
            return this.$message.error('获取商品列表失败!')
          }
          this.goodslist = resp.data.data.data
          this.total2 = resp.data.data.totalpage
          console.log('test1')
          console.log(resp.data.data)
          this.$router.push({name: 'goodsList', params: {list: this.goodslist, queryInfo: this.queryInfo2, total: this.total2}})
          this.$message.success('获取商品列表成功!')
        })
    },
    getDiscounts () {
      this.$router.push({path: '/discountsList'})
    }
  }
}
</script>

<style scoped>
.backDiv {
  width: 100%;
  background: url(../assets/beijing.jpg);
  height: 300px;
  background-repeat: repeat;
  display: flex;
  justify-content: center;
  align-items:flex-start;
}
.flex_center{
  display: flex;
  justify-content: center;
  align-content:center;
  align-items:center;
  flex-flow: column;
}
</style>
